<template>
  <div v-if = "isshow">
    goods
  </div>
  <div v-else>
    <self-breadcrumb :bread-arr = "goodsBread"></self-breadcrumb>
    <el-card class = "box-card">
      <div slot = "header" class = "clearfix">
        <el-input
            @keydown.enter.native = "getGoodsList"
            v-model = "goodsQuery.query"
            placeholder = "商品名称搜索"
            @clear = "getGoodsList"
            clearable>
          <el-button @click = "getGoodsList" slot = "append" icon = "el-icon-search"></el-button>
        </el-input>
        <!-- 这里因为添加商品需要的参数过多,所以这里使用对话框而是跳转到另一个vue进行添加 -->
        <el-button @click = "goAddGoodsPage" type = "primary" class = "add_css">添加商品</el-button>
      </div>
      <el-table
          border
          :data = "goodsList"
          max-height = "440"
          style = "width: 100%">
        <el-table-column
            fixed
            :resizable = "false"
            type = "index"
            label = "#">
        </el-table-column>
        <el-table-column
            :resizable = "false"
            prop = "goods_name"
            width = "550"
            show-overflow-tooltip
            class = "text-process"
            label = "商品名称">
        </el-table-column>
        <el-table-column
            :resizable = "false"
            prop = "goods_price"
            label = "商品价格">
        </el-table-column>
        <el-table-column
            :resizable = "false"
            prop = "goods_weight"
            label = "商品重量">
          <template slot-scope = "scope">
            {{scope.row.goods_weight+'g'}}
          </template>
        </el-table-column>
        <!--
        这里是时间，但是这里获取到的数据都是毫秒，需要转换成常用的时间格式 ，有多种方式可以转换
        这里介绍两种 第一种，使用el-table-column提供的行属性 formatter 动态绑定一个函数绑定时不能传递参数，
        会将函数传递给子组件，在子组件内，子组件会传递参数给函数，然后由函数进行操作
        2. 第二个方式是注册一个全局的Vue过滤器 Vue.filter() 这样在全局都可以使用 并且过滤器可以在{{}}和:v-bind中使用
        -->
        <!-- 这是第一种方式 -->
        <!--        <el-table-column-->
        <!--            prop = "add_time"-->
        <!--            :formatter = "dataFormat"-->
        <!--            label = "创建时间">-->
        <!--        </el-table-column>-->
        <!-- 这是第二种方式 -->
        <el-table-column
            :resizable = "false"
            prop = "add_time"
            width = "150"
            label = "创建时间">
          <template slot-scope = "scope">
            <!--
            过滤器需要这样使用，需要用|隔开，而且可以不传入参数，如果不传入参数的话，那么第一个数就会作为参数传入
            也可以指定传入参数，而且可以使用多个过滤器，但是每个过滤器之间需要使用|隔开
             -->
            {{scope.row.add_time|dataFormat}}
          </template>
        </el-table-column>
        <el-table-column
            :resizable = "false"
            min-width = "130"
            label = "操作">
          <template slot-scope = "scope">
            <el-button size = "small" type = "primary" icon = "el-icon-edit">编辑</el-button>
            <!--
            删除按钮，这里又导入了element-ui中的MessageBox这个的导入与Messgae有些类似不能再Vue.use()中使用
            而是需要注册Vue全局的方法，如果是全局引入了element-ui可以直接使用this.$msgbox()、this.$alert()
            、this.$confirm()、this.$prompt()等方法, 如果没有全局引入就需要先引入MessageBox， 然后再进行注册
            Vue.prototype.$msgbox = MessageBox
            Vue.prototype.$confirm = MessageBox.confirm
            Vue.prototype.$alert = MessageBox.alert
            Vue.prototype.$prompt = MessageBox.prompt
            -->
            <el-button @click = "deleteGoods(scope.row)" size = "small" type = "danger" icon = "el-icon-delete">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :page-sizes = "[1,5,10,20,50,100]"
          :current-page = "currentPage"
          :page-size = "goodsQuery.pagesize"
          @current-change = "handleCurrentChange"
          @size-change = "handleSizeChange"
          layout = "sizes, prev, pager, next, jumper, ->, total"
          :total = "total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import SelfBreadcrumb from '../SelfBreadcrumb'

export default {
  name: 'Goods',
  components: {
    SelfBreadcrumb
  },
  created () {
    this.getGoodsList()
  },
  data () {
    return {
      isshow: false,
      goodsBread: ['商品管理', '商品列表'],
      goodsList: [],
      goodsQuery: {
        query: '',
        pagenum: 1,
        pagesize: 5
      },
      total: 0,
      currentPage: 1
    }
  },
  methods: {
    async getGoodsList () {
      const { data: res } = await this.$http.get('goods', { params: this.goodsQuery })
      if (this.process(res) === 1) {
        this.goodsList = res.data.goods
        this.total = res.data.total
        this.currentPage = Number(res.data.pagenum)
      }
      console.log(res.data)
    },
    process (res) {
      const status = res.meta.status
      const msg = res.meta.msg
      if (status === 200 || status === 201 || status === 204) {
        this.$message.success(msg)
        return 1
      } else {
        this.$message.error(msg)
        return 0
      }
    },
    handleCurrentChange (val) {
      this.goodsQuery.pagenum = val
      this.getGoodsList()
    },
    handleSizeChange (val) {
      this.goodsQuery.pagesize = val
      this.getGoodsList()
    },
    dataFormat (row, column) {
      let dateTime = row.add_time
      if (dateTime) {
        let a = ''
        dateTime = new Date(dateTime)
        a += dateTime.getFullYear() + '-'
        a += dateTime.getMonth() + 1 + '-'
        a += dateTime.getDate() + ' '
        a += dateTime.getHours() + ':'
        a += dateTime.getMinutes() + ':'
        a += (dateTime.getSeconds() + '').padStart(2, '0')
        return a
      }
      return ''
    },
    deleteGoods (row) {
      // 见element.js中引入的MessageBox    Vue.prototype.$alert = MessageBox.alert
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$http.delete(`goods/${row.goods_id}`)
        this.process(res)
        this.getGoodsList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    goAddGoodsPage () {
      window.sessionStorage.setItem('default_active', 'goods/add')
      this.$router.push('goods/add')
    }
  },
  computed: {}
}
</script>

<style lang = "less" scoped>
  .el-card {
    margin-top: 20px;
  }

  .box-card {
    .el-input {
      width: 30%;
    }
  }

  .add_css {
    margin: 0 20px;
    vertical-align: bottom;
  }

  .el-table {
    margin-bottom: 20px;
  }

  .el-steps {
    margin: 20px 0;
  }
</style>
